<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 漫展接单小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="max-w-md mx-auto bg-white min-h-screen pb-20">
        <!-- 顶部导航栏 -->
        <div class="bg-purple-600 text-white p-4 flex justify-between items-center">
            <h1 class="text-xl font-bold">漫拍</h1>
            <div class="flex items-center space-x-2">
                <button class="p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </button>
                <button class="p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- 展会选择 -->
        <div class="p-4 bg-white">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="font-bold">2023上海国际动漫展</h2>
                    <p class="text-sm text-gray-500">2023.11.25-11.26</p>
                </div>
                <button class="text-purple-600 flex items-center">
                    切换展会
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- 功能导航 -->
        <div class="grid grid-cols-4 gap-4 p-4 bg-white">
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </div>
                <span class="text-sm">附近摄影</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                    </svg>
                </div>
                <span class="text-sm">展会地图</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                    </svg>
                </div>
                <span class="text-sm">我的订单</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <span class="text-sm">预约拍摄</span>
            </div>
        </div>

        <!-- 热门摄影师 -->
        <div class="mt-2 p-4 bg-white">
            <div class="flex justify-between items-center mb-3">
                <h2 class="font-bold text-lg">热门摄影师</h2>
                <a href="#" class="text-sm text-purple-600">查看全部</a>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-gray-50 rounded-lg p-2">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="摄影师作品" class="w-full h-32 object-cover rounded-lg">
                        <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">空闲</span>
                    </div>
                    <div class="mt-2">
                        <div class="flex justify-between items-center">
                            <h3 class="font-bold">小明摄影</h3>
                            <div class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                                <span class="text-sm ml-1">4.9</span>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500">专注Cosplay人像摄影</p>
                        <p class="text-xs text-gray-500 mt-1">位置: A区 12号摊位</p>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-2">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="摄影师作品" class="w-full h-32 object-cover rounded-lg">
                        <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">忙碌</span>
                    </div>
                    <div class="mt-2">
                        <div class="flex justify-between items-center">
                            <h3 class="font-bold">小红摄影</h3>
                            <div class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                                <span class="text-sm ml-1">4.8</span>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500">日系风格人像摄影</p>
                        <p class="text-xs text-gray-500 mt-1">位置: B区 5号摊位</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最新活动 -->
        <div class="mt-2 p-4 bg-white">
            <div class="flex justify-between items-center mb-3">
                <h2 class="font-bold text-lg">最新活动</h2>
                <a href="#" class="text-sm text-purple-600">更多</a>
            </div>
            <div class="space-y-3">
                <div class="bg-gray-50 rounded-lg p-3">
                    <h3 class="font-bold">漫展摄影大赛</h3>
                    <p class="text-sm text-gray-600 mt-1">参与摄影大赛，赢取丰厚奖品！</p>
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-xs text-gray-500">11月25日 14:00-16:00</span>
                        <button class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">报名参加</button>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-3">
                    <h3 class="font-bold">人气Coser签名会</h3>
                    <p class="text-sm text-gray-600 mt-1">与知名Coser近距离接触，获取签名合影机会！</p>
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-xs text-gray-500">11月26日 10:00-12:00</span>
                        <button class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">预约</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around items-center p-2 max-w-md mx-auto">
            <a href="#" class="flex flex-col items-center text-purple-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14" />
                </svg>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                </svg>
                <span class="text-xs mt-1">地图</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
                <span class="text-xs mt-1">订单</span>
            </a>
            <a href="#" class="flex flex-col items-center text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="max-w-md mx-auto bg-white min-h-screen">
        <!-- 顶部轮播图 -->
        <div class="relative h-48 bg-indigo-600">
            <img src="https://source.unsplash.com/random/800x400/?cosplay" alt="漫展海报" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
                <h1 class="text-white text-2xl font-bold">2023夏日动漫嘉年华</h1>
            </div>
        </div>
        
        <!-- 功能区 -->
        <div class="grid grid-cols-4 gap-2 p-4 bg-white">
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </div>
                <span class="text-xs mt-1">摄影师</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
                <span class="text-xs mt-1">预约</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <span class="text-xs mt-1">排队状态</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                </div>
                <span class="text-xs mt-1">我的</span>
            </div>
        </div>
        
        <!-- 推荐摄影师 -->
        <div class="p-4">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-bold">推荐摄影师</h2>
                <a href="#" class="text-sm text-indigo-600">查看全部</a>
            </div>
            
            <div class="space-y-4">
                <!-- 摄影师卡片 1 -->
                <div class="flex bg-white rounded-lg shadow p-3">
                    <div class="w-16 h-16 rounded-full overflow-hidden mr-3">
                        <img src="https://source.unsplash.com/random/100x100/?portrait,1" alt="摄影师头像" class="w-full h-full object-cover">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <h3 class="font-bold">小明摄影</h3>
                            <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">空闲</span>
                        </div>
                        <div class="text-xs text-gray-500 mt-1">专注Cosplay人像 | 评分 4.9</div>
                        <div class="flex mt-2">
                            <div class="w-10 h-10 rounded overflow-hidden mr-1">
                                <img src="https://source.unsplash.com/random/100x100/?cosplay,1" alt="作品" class="w-full h-full object-cover">
                            </div>
                            <div class="w-10 h-10 rounded overflow-hidden mr-1">
                                <img src="https://source.unsplash.com/random/100x100/?cosplay,2" alt="作品" class="w-full h-full object-cover">
                            </div>
                            <div class="w-10 h-10 rounded overflow-hidden">
                                <img src="https://source.unsplash.com/random/100x100/?cosplay,3" alt="作品" class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 摄影师卡片 2 -->
                <div class="flex bg-white rounded-lg shadow p-3">
                    <div class="w-16 h-16 rounded-full overflow-hidden mr-3">
                        <img src="https://source.unsplash.com/random/100x100/?portrait,2" alt="摄影师头像" class="w-full h-full object-cover">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <h3 class="font-bold">小红摄影</h3>
                            <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">忙碌</span>
                        </div>
                        <div class="text-xs text-gray-500 mt-1">二次元风格 | 评分 4.8</div>
                        <div class="flex mt-2">
                            <div class="w-10 h-10 rounded overflow-hidden mr-1">
                                <img src="https://source.unsplash.com/random/100x100/?anime,1" alt="作品" class="w-full h-full object-cover">
                            </div>
                            <div class="w-10 h-10 rounded overflow-hidden mr-1">
                                <img src="https://source.unsplash.com/random/100x100/?anime,2" alt="作品" class="w-full h-full object-cover">
                            </div>
                            <div class="w-10 h-10 rounded overflow-hidden">
                                <img src="https://source.unsplash.com/random/100x100/?anime,3" alt="作品" class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 漫展活动 -->
        <div class="p-4">
            <h2 class="text-lg font-bold mb-3">近期漫展活动</h2>
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <img src="https://source.unsplash.com/random/800x400/?convention" alt="漫展活动" class="w-full h-32 object-cover">
                <div class="p-3">
                    <h3 class="font-bold">2023夏日动漫嘉年华</h3>
                    <div class="text-xs text-gray-500 mt-1">时间：2023.7.15-7.17</div>
                    <div class="text-xs text-gray-500">地点：北京国际会展中心</div>
                    <button class="mt-2 w-full bg-indigo-600 text-white py-2 rounded-lg text-sm">查看详情</button>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around py-2">
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                </svg>
                <span class="text-xs mt-1 text-indigo-600">首页</span>
            </div>
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span class="text-xs mt-1 text-gray-400">摄影师</span>
            </div>
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <span class="text-xs mt-1 text-gray-400">预约</span>
            </div>
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span class="text-xs mt-1 text-gray-400">我的</span>
            </div>
        </div>
    </div>
</body>
</html>